<template>
	<div class="myorders">
		<div class="search">
			<router-link to="/mobile/myhome"><</router-link>
				<form @submit.prevent="setSearch()">
					<input type="search" placeholder="搜索我的订单" required v-model="keywords" />
					<input type="submit" value="搜索" />
				</form>
		</div>
		<div class="div1">
			<ul class="menus">
				<li @click="option(1)">全部</li>
				<li @click="option(2)">待付款</li>
				<li @click="option(3)">待收货</li>
				<li>待评价</li>
			</ul>
		</div>
		<div v-for="item in orders">
			<div class="div2" v-for="shop in item.items">
				<aside class="aside1">
					<img src="../../../assets/img/login/dangdang.webp"/>
					<h4>当当自营</h4>
					<span v-if="item.payStatus==1">交易成功</span>
					<span v-if="item.payStatus==0">未付款</span>
				</aside>
				<div class="img">
					<router-link :to="`/mobile/bookdetail/${shop.book.id}`">
						<img :src="`${$ip}/api/public/showimg/${shop.book.pic}`"/>
						<aside class="aside2">
							<span>{{shop.book.name}}</span>
							<p>x{{shop.num}}</p>
						</aside>
					</router-link>
				</div>
				<div class="payment">
					<p>实付款：￥{{shop.price}}</p>
					<button v-if="item.payStatus==1" @click="add(shop.book.id)">再次购买</button>
					<button v-if="item.payStatus==0" @click="payment(item.ordid)">去付款</button>
				</div>
			</div>
		</div>
		<div class="div3">
			<p>一一 • 没有更多订单了 • 一一</p>
		</div>
	</div>
</template>

<script>
export default {
	name:'MyOrders',
	data(){
		return{
			keywords:'',
			page:{
				num:1,
				lines:5
			},
			order:{},
			orders:[],
			book:[],
		}
	},
	methods:{
		// 再次购买
		add(id){
			this.$router.push({path:`/mobile/bookdetail/${id}`});
		},
		// 未付款，前往付款
		payment(ordid){
			this.$router.push({path:'/mobile/payment',query:{id:ordid}});
			console.log(ordid);
		},
		setSearch(){
			this.orders=[];
			let a =parseInt(this.keywords);
			this.$get("/api/fore/ord/findByOrdid/"+a).then((resp)=>{
				if(resp.data.data!=null){
					this.orders.push(resp.data.data);
					console.log(this.orders);
					this.$message({
						message: '查找成功',
						type: 'success'
					});
				}else{
					this.$message.error('该订单不存在');
				}
			})
		},
		option(val){
			this.order={};
			switch(val){
				case 1:
					this.order={};
					break;
				case 2:
					this.order={
						payStatus:0,
					};
					break;
				case 3:
					this.order={
						shipStatus:1,
					};
					break;
			}
			this.getOrder();
		},
		
		//获取用户id和查找用户下单状态
		getOrder(){
			this.$postkv("/api/fore/ord/findPageOrders/" + this.page.num + "/" + this.page.lines,this.order).then((resp)=>{
			this.orders =resp.data.data.orders;
			console.log(this.orders);
		})
		}
	},
	mounted(){
		//调用查找用户订单
		this.getOrder();
	}
}
</script>

<style scoped>
a{
display: flex;
color: black;
}
.myorders{
	width: 100%;
	background-color: #eeeeee;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.myorders .search {
	width: 100%;
	display: flex;
	align-items: center;
}
.myorders .search a {
	font-size: 1.8rem;
	margin-left: 0.8rem;
	line-height: 3rem;
	color: #000000;
}
.myorders .search a {
	font-size: 1.8rem;
	margin-left: 0.8rem;
	line-height: 3rem;
	color: #000000;
}
.myorders .search form {
	width: 100%;
	height: 3.5rem;
	line-height: 3.5rem;
	margin: 0 auto;
}
.myorders .search input[type="search"] {
	width: 80%;
	line-height: 2.2rem;
	border-radius: 0.8rem;
	border: none;
	margin-left: 1rem;
	text-indent: 0.8rem;
}
.myorders .search input[type="submit"] {
	line-height: 2.2rem;
	border: none;
	margin-left: 0.5rem;
	background-color: #eeeeee;
	font-size: 0.9rem;
}
.myorders .div1{
	width: 90%;
	margin-top: 1rem;
}
.myorders .div1 .menus{
	display: flex;
	justify-content: space-around;
}
.myorders .div1 .menus li{
	color: black;
}
.myorders .div1 .menus li:hover{
	color: red;
}
.myorders .div2{
	width: 95%;
	margin: 0 auto;
	margin-top: 1.5rem;
	background-color: #ffffff;
	border-radius: 10px;
}
.myorders .div2 .aside1{
	width: 96%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	line-height: 2rem;
}
.myorders .div2 .aside1 h4{
	margin-right: 12rem;
	margin-top: 0.5rem;
}
.myorders .div2 .aside1 span{
	margin-top: 0.5rem;
	color: #eb9d00;
}
.myorders .div2 .aside1 img{
	width: 1.5rem;
	height: 1.6rem;
	margin-top: 0.8rem;
	margin-left: 0.5rem;
}
.myorders .div2 .img{
	width: 96%;
	margin: 0 auto;
	margin-top: 2rem;
	display: flex;
}
.myorders .div2 .img img{
	width: 6rem;
	height: 6rem;
	border-radius: 4px;
	margin-left: 0.5rem;
}
.myorders .div2 .img .aside2{
	margin-left: 1rem;
	margin-top: 0.5rem;
}
.myorders .div2 .payment{
	width: 62%;
	display: flex;
	position: relative;
	bottom: 1.5rem;
	left: 8rem;
	align-items: center;
	justify-content: space-between;
}
.myorders .div2 .payment p{
	width:68%;
	font-size: 14px;
}
.myorders .div2 .payment button{
	width: 32%;
	font-size: 14px;
	line-height: 1.5rem;
	color: white;
	background-color: #fe301a;
	border: none;
	border-radius: 4px;
}
.myorders .div3 p{
	color: #a2a2a2;
	font-size: 18px;
	text-align: center;
	margin-top: 2rem;
}
</style>
